<template>
  <div class="index">
    <!-- 分类，图片流，登录 -->
    <div class="index-first">
      <!-- 分类 -->
      <div class="index-first-left">
        <div class="index-first-left-title">全部分类</div>
        <div class="index-first-left-group">
          <div
            class="index-first-left-item"
            v-for="c in list.classifyList"
            :key="c.id"
          >
            <div class="index-first-left-item-top">
              <div class="index-first-left-item-top-title">{{ c.name }}</div>
              <img
                class="index-first-left-item-top-icon"
                src="@/assets/images/image(29).png"
              />
            </div>
            <div class="index-first-left-item-down">
              <div
                v-for="p in c.children"
                :key="p.id"
                class="index-first-left-item-down-item"
              >
                {{ p.name }}
              </div>
              <!-- <div class="index-first-left-item-down-item">连锁药店</div>
              <div class="index-first-left-item-down-item">终端销售</div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="index-first-middle">
        <pic-group v-model:list="list.topPicList"></pic-group>
      </div>
      <div class="index-first-right">
        <!-- 登录注册 -->
        <div class="index-first-right-one">
          <!-- 头像，个人信息 -->
          <div class="index-first-right-one-top">
            <img
              class="index-first-right-one-top-avatar"
              src="@/assets/images/image(8).png"
            />
            <div class="index-first-right-one-top-msg">
              <div class="index-first-right-one-top-msg-up">Hi~~~</div>
              <div class="index-first-right-one-top-msg-down">
                <div class="index-first-right-one-top-msg-down-black">
                  你好，欢迎加入
                </div>
                <div class="index-first-right-one-top-msg-down-orange">
                  礼品网
                </div>
              </div>
            </div>
          </div>
          <div class="index-first-right-one-down">
            <div
              class="index-first-right-one-down-login"
              @click="handleRoute(1)"
            >
              登录
            </div>
            <div
              class="index-first-right-one-down-register"
              @click="handleRoute(2)"
            >
              注册
            </div>
          </div>
        </div>
        <!-- 四个功能 -->
        <div class="index-first-right-two">
          <!-- 广告申请 -->
          <div class="index-first-right-two-item" @click="handleRoute(3)">
            <img
              class="index-first-right-two-item-icon"
              src="@/assets/images/image(57).png"
            />
            <div class="index-first-right-two-item-title">广告申请</div>
          </div>
          <!-- 客户咨询 -->
          <div class="index-first-right-two-item" @click="handleRoute(4)">
            <img
              class="index-first-right-two-item-icon"
              src="@/assets/images/image(60).png"
            />
            <div class="index-first-right-two-item-title">客户咨询</div>
          </div>
          <!-- 客户好评 -->
          <div class="index-first-right-two-item" @click="handleRoute(5)">
            <img
              class="index-first-right-two-item-icon"
              src="@/assets/images/image(62).png"
            />
            <div class="index-first-right-two-item-title">客户好评</div>
          </div>
          <!-- 了解我们 -->
          <div class="index-first-right-two-item" @click="handleRoute(6)">
            <img
              class="index-first-right-two-item-icon"
              src="@/assets/images/image(2).png"
            />
            <div class="index-first-right-two-item-title">了解我们</div>
          </div>
        </div>
        <!-- 行业资讯 -->
        <div class="index-first-right-three">
          <div class="index-first-right-three-header">
            <div class="index-first-right-three-header-left">
              <img
                class="index-first-right-three-header-left-icon"
                src="@/assets/images/image(34).png"
              />
              <div class="index-first-right-three-header-left-title">
                行业资讯
              </div>
            </div>
            <div
              class="index-first-right-three-header-right"
              @click="handleRoute(7)"
            >
              <div class="index-first-right-three-header-right-title">更多</div>
              <img
                class="index-first-right-three-header-right-icon"
                src="@/assets/images/image(29).png"
              />
            </div>
          </div>
          <div class="index-first-right-three-body">
            <div
              v-for="i in list.industryList"
              :key="i.id"
              @click="handleIndustryDetails(i.id)"
              class="index-first-right-three-body-title"
            >
              {{ i.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- waterfall -->
    <div class="index-second">
      <waterfall
        v-for="(w, index) in list.waterfallList"
        :key="index"
        :type="index"
        :list="w"
      />
    </div>
  </div>
</template>
<script setup>
import { ToastBottom, setObj, getObj } from "@/utils/index";
import { ElMessage } from "element-plus";
import PicGroup from "@/components/picGroup/index";
import Waterfall from "@/components/waterfall/index";
import {
  watch,
  onMounted,
  computed,
  ref,
  reactive,
  toRefs,
  inject,
  defineProps,
} from "vue";
import { useRoute, useRouter } from "vue-router";
//获取路由
const $_route = useRoute();
const $_router = useRouter();
//获取接口
const $_api = inject("$api");
// 获取props
const props = defineProps({
  formData: Object,
});
watch(
  () => props.formData,
  () => {
    api.getIndex(props.formData);
  }
);
onMounted(() => {
  //获取首页信息
  api.getIndex(props.formData);
  //获取搜索信息
  api.getSearch();
  //获取资讯列表
  api.getIndustryList();
});
//获取接口
const api = reactive({
  formData: {
    f_id: "",
    name: "",
  },
  getIndex: async formData => {
    const results = await $_api.index(formData);
    if (results && results.status > 0) {
      console.log(results, "index");
      list.classifyList = results.fenlei;
      list.topPicList = results.data.shang;
      list.waterfallList = results.data.goods_list;
    }
  },
  getSearch: async () => {
    const results = await $_api.search();
    if (results && results.status > 0) {
      // console.log(results.data, "getSearch");
    }
  },
  getIndustryList: async () => {
    const results = await $_api.zixunList({
      page: 1,
      page_size: 8,
    });
    if (results && results.status > 0) {
      console.log(results.data, "zixunList");
      list.industryList = results.data;
    }
  },
});
// 列表
const list = reactive({
  //标题栏搜索区下拉
  selectList: [
    { id: 1, name: "找产品" },
    { id: 2, name: "找企业" },
  ],
  //上部图片列表
  topPicList: [],
  //销售渠道列表
  classifyList: [],
  //资讯列表
  industryList: [],
  //
  waterfallList: [],
});
// 路由跳转
const handleRoute = id => {
  switch (id) {
    case 1:
      $_router.replace({
        path: "/login",
      });
      break;
    case 2:
      $_router.replace({
        path: "/register",
      });
      break;
    case 3:
      $_router.push({
        path: "/advertising",
      });
      break;
    case 4:
      // $_router.push({
      //   path: "/advertising",
      // });
      break;
    case 5:
      $_router.push({
        path: "/praise",
      });
      break;
    case 6:
      // $_router.push({
      //   path: "/praise",
      // });
      break;
    case 7:
      $_router.push({
        path: "/industry",
      });
      break;
  }
};
// 资讯详情
const handleIndustryDetails = id => {
  $_router.push({
    path: `/industryDetail/${id}`,
  });
};
</script>

<style lang="scss" scoped>
.index {
  @include flex(flex-start, center);
  flex-direction: column;
  margin: 5px auto 0;
  width: 1200px;
}
.index-first {
  @include flex(flex-start, center);
  flex-shrink: 0;
  width: 100%;
  height: 625px;
  box-sizing: border-box;
}
.index-first-left {
  @include flex(flex-start, center);
  flex-direction: column;
  flex-shrink: 0;
  width: 270px;
  height: 100%;
}
.index-first-left-title {
  flex-shrink: 0;
  padding: 0 15px;
  box-sizing: border-box;
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: left;
  background: #e07a36;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
}
.index-first-left-group {
  @include flex(flex-start, center);
  flex-direction: column;
  width: 100%;
  flex-grow: 1;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px #cacaca;
}
.index-first-left-item {
  @include flex(space-around, center);
  flex-direction: column;
  padding: 0 15px 0 11px;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  background: #fff;
  border-left: 4px solid #ffffff;
  border-bottom: 1px solid #e1e1e1;
}
.index-first-left-item:hover {
  @include flex(space-around, center);
  flex-direction: column;
  padding: 0 15px 0 11px;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  // color: #fff;
  background: #e07a36;
  border-left: 4px solid #eeae2d;
  border-bottom: 1px solid #e1e1e1;
  .index-first-left-item-top-title {
    color: #fff;
  }
  .index-first-left-item-down-item {
    color: #fff;
  }
  .index-first-left-item-down-item:first-child {
    border-right: 1px solid #fff;
  }
  .index-first-left-item-down-item:nth-child(2) {
    border-right: 1px solid #fff;
  }
}
.index-first-left-item:last-child {
  border-bottom: none;
}
.index-first-left-item-top {
  @include flex(space-between, center);
  width: 100%;
}
.index-first-left-item-top-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2f2f2f;
  line-height: 25px;
}
.index-first-left-item-top-icon {
  width: 6px;
  height: 11px;
}
.index-first-left-item-down {
  @include flex(center, center);
  width: 100%;
}
.index-first-left-item-down-item {
  width: calc(100% / 3);
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 16px;
  box-sizing: border-box;
}
.index-first-left-item-down-item:first-child {
  // text-align: left;
  border-right: 1px solid #2f2f2f;
}
.index-first-left-item-down-item:nth-child(2) {
  // text-align: center;
  border-right: 1px solid #2f2f2f;
}
.index-first-left-item-down-item:last-child {
  // text-align: right;
}
.index-first-middle {
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
}

.index-first-right {
  @include flex(flex-start, center);
  flex-direction: column;
  flex-shrink: 0;
  width: 260px;
  height: 100%;
  background: #efefef;
}
.index-first-right-one {
  @include flex(space-between, center);
  flex-direction: column;
  flex-shrink: 0;
  padding: 20px;
  width: 100%;
  height: 135px;
  box-sizing: border-box;
  border-bottom: 1px solid #e1e1e1;
}
.index-first-right-one-top {
  @include flex(flex-start, center);
  width: 100%;
}
.index-first-right-one-top-avatar {
  flex-shrink: 0;
  margin-right: 8px;
  width: 45px;
  height: 45px;
}
.index-first-right-one-top-msg {
  @include flex(space-around, flex-start);
  flex-direction: column;
  flex-grow: 1;
  height: 45px;
}
.index-first-right-one-top-msg-up {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
}
.index-first-right-one-top-msg-down {
  @include flex(flex-start, center);
}
.index-first-right-one-top-msg-down-black {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
}
.index-first-right-one-top-msg-down-orange {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fa6400;
}
.index-first-right-one-down {
  @include flex(space-between, center);
  width: 100%;
}
.index-first-right-one-down-login {
  width: 100px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: #ff9c5a;
  border-radius: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.index-first-right-one-down-register {
  width: 100px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: #e16c1e;
  border-radius: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.index-first-right-two {
  @include flex(flex-start, center);
  flex-shrink: 0;
  flex-wrap: wrap;
  padding-top: 10px;
  box-sizing: border-box;
  width: 100%;
}
.index-first-right-two-item {
  @include flex(flex-start, center);
  flex-direction: column;
  margin-bottom: 10px;
  width: calc(100% / 2);
  cursor: pointer;
}
.index-first-right-two-item-icon {
  margin-bottom: 10px;
  width: 66px;
  height: 61px;
}
.index-first-right-two-item-title {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 25px;
}
.index-first-right-three {
  @include flex(flex-start, center);
  flex-direction: column;
  width: 100%;
  flex-grow: 1;
  box-sizing: border-box;
}
.index-first-right-three-header {
  @include flex(space-between, center);
  flex-shrink: 0;
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
  height: 47px;
  background: #e07a36;
}
.index-first-right-three-header-left {
  @include flex(flex-start, center);
}
.index-first-right-three-header-left-icon {
  margin-right: 10px;
  width: 19px;
  height: 20px;
}
.index-first-right-three-header-left-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 25px;
}
.index-first-right-three-header-right {
  @include flex(flex-end, center);
  cursor: pointer;
}
.index-first-right-three-header-right-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 20px;
}
.index-first-right-three-header-right-icon {
  margin-left: 5px;
  width: 6px;
  height: 11px;
}
.index-first-right-three-body {
  @include flex(flex-start, center);
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
}
.index-first-right-three-body-title {
  @include text_cut_line;
  margin-bottom: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.index-first-right-three-body-title:last-child {
  margin-bottom: 0;
}

.index-second {
  @include flex(flex-start, center);
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.login-card-body-block-input :deep(.el-input__inner) {
  border-radius: 0;
  border: none;
  padding-left: 0;
}
</style>
